<template>
    <div class='dialog'>
        <div class='newAdd dialog-con editStock'>
                <div class="stockAdd">
                    <p>新增</p>
                </div>
            <div class="stockInfo">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品货号" prop="productCode" style=" margin:20px 0;">
                        <el-input v-model="ruleForm.productCode" style="width:228px;" :disabled="disabled"></el-input>
                        <el-button @click="commoditySeach" :disabled="disabled" size="medium">查询</el-button>
                    </el-form-item>
                    <el-form-item label="商品sku名称" style=" margin:20px 0;">
                        <el-input v-model="getProductCode.productSkuName" readonly></el-input>
                    </el-form-item>
                     <el-form-item label="商品数量" prop="productNum" style="margin:20px 0;" >
                        <el-input v-model="ruleForm.productNum"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="残次品数量" prop="productNo" style="margin:20px 0;" >
                        <el-input v-model="ruleForm.productNo"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
                    </el-form-item>
                     <el-form-item label="选择仓库" prop="depotId">
                        <el-select v-model="ruleForm.depotId" placeholder="请选择" style="width:300px;">
                            <el-option
                                v-for="item in depotData"
                                :key="item.id"
                                :label="item.depotName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <!-- <el-form-item label="预警库存" prop="warning" style=" margin:20px 0;">
                        <el-input v-model="ruleForm.warning"></el-input>
                    </el-form-item> -->
                    <el-form-item label="备注" prop="storage" style=" margin:20px 0;">
                        <el-input v-model="ruleForm.storage"></el-input>
                    </el-form-item>
                    <el-form-item class="confirm">
                        <el-button type="primary"  size="medium" @click="submitForm('ruleForm')" style="margin:0 20px" :disabled="isStockBtn">创建</el-button>
                        <el-button @click="cancelButton"  size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import {localStorage} from 'js/localStorage'
import regular from 'js/regular'
export default {
    inject:['reload'],
    data(){
        return{
            depotData:[],
            //创建按钮是否显示
            isStockBtn:false,
            userId:'',
            disabled:false,
            ruleForm: {
                productCode:'',
                productSkuName:'',
                productNum:0,
                depotName:'',
                depotId:'',
                productNo:'',
                storage:''
            },
            getProductCode:{},
            rules:{
                productName: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                productCode: [
                    { required: true, message: '请输入商品货号', trigger: 'change' }
                ],
                productNumber: [
                    { required: true, message: '请输入商品数量', trigger: 'change' }
                ],
                depotId:[
                    { required: true, message: '请选择仓库', trigger: 'change' }
                ],
                storeHouse:[
                    { required: true, message: '请输入备注', trigger: 'change' }
                ],
                warning:[
                    { required: true, message: '请输入预警库存', trigger: 'change' }
                ]
            }
        }
    },
    created(){
        this.userId=localStorage.get("userID")
        this.getWareHouse()
    },
    methods:{
      getWareHouse(){
        let success=data=>{
          if(data.code=="OK"){
            this.depotData=data.data;
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.erpComplainDepotListAll({},success)
      },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        //搜索接口
        commoditySeach(){
            let parmas={
                productCode:this.ruleForm.productCode
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.getProductCode=data.data
                    this.disabled=true
                }else{
                    this.$message.error(data.msg)
                     this.disabled=false
                }
            }
            api.findProductByCode(parmas,success)
        },
        //点击确定按钮，掉接口
        confirm(){
            if(Number(this.ruleForm.productNum) < Number(this.ruleForm.productNo)){
                return  this.$message.error("商品数量需大于商品残次品数量") 
            }
            let parmas={
                productCode:this.ruleForm.productCode,
                productSkuName:this.getProductCode.productSkuName || '',
                productNum:this.ruleForm.productNum,
                productNo:this.ruleForm.productNo,
                depotId:this.ruleForm.depotId,
                storage:this.ruleForm.storage,
                productId:this.getProductCode.productId,
                userId:this.userId
            }
            this.$loading.show()
            this.isStockBtn=true
            let success=data=>{
                if(data.code=="OK"){
                    this.$message.success('创建成功')
                    this.isStockBtn=false;
                    this.$loading.hide()
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.isStockBtn=false;
                    this.$loading.hide()
                    this.$message.error(data.msg)
                }
            }
            api.depotStorageAdd(parmas,success)
        },
        cancelButton(){
            this.$emit('closeDialog')
        },
    }
}
</script>

<style lang="scss" scoped>
.editStock{
    width:480px;
    height:480px;
    .stockAdd{
        background: #eee;
       p{
        font-size:18px;
        text-align: center;
        line-height: 45px;
        color:#606266;
       }
    }
    .stockInfo{
        .el-input{
            width:300px;
        }
    }
    .confirm{
        text-align:center;
        width:80%;
    }
}
</style>

